<template>
	<view class="bg-white">
		<cu-custom :bgColor="globalData.bgColor" :isBack="true">
			<block slot="content"><text class="text-darkgrey">全部订单</text></block>
		</cu-custom>
		<view class="search">
			<view class=" flex bg-white  padding-tb-sm solid-bottom">
				<view class="search-content round">
					<text class="cuIcon-search padding-right-xs margin-left"></text>
					<input type="text" placeholder="输入订单号搜索" v-model="inputKey" confirm-type="search"></input>
				</view>
				<view class="action">
					<button class="cu-btn bg-blue round search-button margin-right-sm" @click="search">搜索</button>
				</view>
			</view>
			<scroll-view scroll-x class="bg-white nav solid-bottom ">
				<view class="cu-item flex-sub" :class="index==TabCur?'text-blue cur':''" v-for="(item,index) in tabs"
					:key="index" @tap="tabSelect" :data-id="index">{{item}}</view>
			</scroll-view>
		</view>
		<mescroll-body class="bg-gray" style="margin-top:190rpx;" ref="mescrollRef" @init="mescrollInit"
			@down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
			<view class="cu-list ">
				<view class="cu-item radius bg-white solid-bottom" v-for="data in dataList" :key="data.id">
					<view class="flex justify-between">
						<view class="padding-top padding-left-sm padding-bottom-sm">
							<text class="text-darkgrey text-sm cuIcon-titles">订单号:{{data.orderNo}}</text>
						</view>
					</view>
					<view class="cu-list menu-avatar flex justify-between padding-left align-center"
						v-for="item in data.listOrderItem" :key="item.id">
						<view class="cu-avatar img-box bg-white"
							:style="{'background-image':item.picUrl?'url('+item.picUrl+')':''}"></view>
						<view class="content flex-sub padding-lr">
							<view class="text-darkgrey text-lg text-bold text-to-long">
								<text v-show="data.orderType != '0'"
									class="cu-tag text-sm light bg-red margin-right-xs radius">
									{{data.orderType == '1' ? '砍价' : data.orderType == '2' ? '拼团' : data.orderType == '3' ? '秒杀' : ''}}</text>
								{{item.spuName}}
							</view>
							<view class="text-darkgrey text-df flex justify-between margin-top-xs text-sm">
								<text>规格：{{item.specInfo?item.specInfo:'单规格'}}</text>
								<text>×{{item.quantity}}</text>
							</view>
							<view class="margin-top-xs  justify-between">
								<view class="cu-tab line-orange sm margin-top-xs text-sm">{{item.statusDesc}}</view>
								<view class="text-darkgrey text-sm">支付金额：<text
										class="text-red text-xl  text-price">{{item.paymentPrice}}{{item.paymentCouponPrice ? ' + 优惠券￥'+item.paymentCouponPrice : ''}}{{item.paymentPoints ? ' + 积分'+item.paymentPoints : ''}}</text>
									<text class="text-blue margin-left-xl" @click="showEditPriceDialog(item)"
										v-if="item.status == '0' && data.isPay == '0' && !data.status">改价<text
											class="cuIcon-write"></text></text>
								</view>
							</view>
						</view>
					</view>
					<view class="padding-lr text-sm margin-top" v-if="data.orderLogistics">
						<view class="text-purple-grey"><text
								class="text-purple-grey cuIcon-deliver margin-right-xs"></text>{{data.deliveryWay==1?'普通快递':'上面自提'}}
						</view>
						<view v-if="data.deliveryWay==1" class="margin-top-xs">
							<!-- <view class="text-lg text-black ">收货人信息</view> -->
							<view class="text-purple-grey margin-top-xs"><text
									class="text-purple-grey cuIcon-people margin-right-xs"></text>{{data.orderLogistics.userName +' '}}{{data.orderLogistics.telNum}}
							</view>
							<view class="margin-top-xs text-purple-grey"><text
									class="text-purple-grey cuIcon-location margin-right-xs"></text>{{data.orderLogistics.address}}
							</view>
							<view class="margin-top-xs text-purple-grey"><text
									class="text-purple-grey cuIcon-time margin-right-xs"></text>{{data.createTime}}
							</view>
						</view>
					</view>
					<view class="padding-left padding-right text-sm margin-top-xs padding-bottom-xs">
						<view class="text-df text-purple-grey margin-bottom-xs text-sm"
							v-if="data.orderLogistics&&data.orderLogistics.message"><text
								class="text-sm">签收信息：</text><text class="text-sm">{{data.orderLogistics.message}}</text>
						</view>
						<view class="text-df text-black flex  justify-between">
							<view class="text-darkgrey">订单总金额：<text
									class="text-price text-xl text-bold text-red margin-right-xs">{{data.paymentPrice}}</text><text
									class="text-purple-grey text-sm">(含运费)</text></view>
							<!-- <view class="text-sm text-gray padding-top-xs">{{data.createTime}}</view> -->
						</view>
						<view class="flex margin-top-xs">
							<view class="text-xs margin-right-xs light round pay" v-show="data.appraisesStatus"
								:class="data.appraisesStatus!=0?'bg-blue':'bg-orange'">{{data.appraisesStatus == '0' ? '未评价' :
							        data.appraisesStatus == '1' ? '已评价' : data.appraisesStatus == '2' ? '已追评' :''}}</view>
							<view class="text-xs margin-right-xs light round pay"
								:class="data.isPay==1?'bg-cyan':'bg-orange'">{{data.isPay==1?'已支付':'未支付'}}</view>
							<view class="text-xs margin-right-xs light round pay"
								:class="data.status==2||data.status==3||data.status==4?'bg-blue':'bg-orange'">
								{{data.statusDesc}}</view>
						</view>
					</view>
					<view v-if="globalData.permissions['mall:orderinfo:edit']"
						class="padding-left padding-right text-sm margin-top-xs padding-bottom-sm flex justify-end">
						<view v-if="data.isPay == '0' && !data.status"
							class="cu-btn round bg-blue button-bg margin-right-sm" @tap="onOrderCancel(data)">取消</view>
						<view v-if="data.status==1&&data.deliveryWay==2"
							class="cu-btn round bg-blue button-bg margin-right-sm" @tap="onTakeGoods(data)">提货</view>
						<navigator :url="'logisticsForm?id='+data.id" v-else-if="data.status==1"
							class="cu-btn round button-bg bg-blue shadow-blur margin-right-sm">发货</navigator>
						<navigator :url="'detail?id='+data.id" class="cu-btn round  bg-blue button-bg">详情查询</navigator>
					</view>
					<view v-else
						class="padding-left padding-right text-sm margin-top-xs padding-bottom-sm flex justify-end">
						<navigator :url="'detail?id='+data.id" class="cu-btn round  bg-blue button-bg">详情查询</navigator>
					</view>
				</view>
			</view>
		</mescroll-body>

		<!-- 改价弹框 -->
		<view class="cu-modal" :class="showModal?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">请输入价格</view>
					<view class="action" @tap="showModal=false">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding">
					<input placeholder="价格" type="number" name="paymentPrice"
						@input="editPriceForm.paymentPrice=$event.target.value"
						:value="editPriceForm.paymentPrice"></input>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="showModal=false">取消</button>
						<button class="cu-btn bg-green margin-left" @tap="handleEditPrice">确定</button>
					</view>
				</view>
			</view>
		</view>
		<!-- 扫码核销 -->
		<float-btn @onFloatBtnClick="onTips" icon="cuIcon-question" :bottom="310"></float-btn>
		<float-btn @onFloatBtnClick="onScan('pad')" icon="cuIcon-scan"></float-btn>
	</view>
</template>

<script>
	import floatBtn from "@/components/float-btn/index.vue";
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	const app = getApp();
	import {
		getPage,
		takeGoods,
		orderCancel,
		editPrice
	} from '@/api/mall/orderinfo'

	import permision from "@/public/app-plus/permission.js";

	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			floatBtn
		},
		onLoad(e) {
			if (e && e.status) {
				this.TabCur = Number(e.status) + 1;
				this.scrollLeft = (this.TabCur - 1) * 60
			}
		},
		onShow() {
			if (this.mescroll) {
				this.mescroll.resetUpScroll(); //刷新
			}
		},
		data() {
			return {
				globalData: app.globalData,
				CustomBar: this.CustomBar,
				TabCur: 0,
				scrollLeft: 0,
				tabs: ['全部', '待付款', '待发货', '待收货', '已完成', '待评价', '已取消'],
				inputKey: '',
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				downOption: { // 下拉刷新的配置(可选, 绝大部分情况无需配置)

				},
				// 上拉加载的配置(可选, 绝大部分情况无需配置)
				upOption: {
					page: {
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					}
				},
				// 列表数据
				dataList: [],
				showModal: false,
				editPriceForm: {
					id: null,
					paymentPrice: 0
				}
			}
		},
		onPageScroll(e) {
			uni.$emit('onPageScroll', e)
		},
		methods: {
			showEditPriceDialog(item) {
				this.editPriceForm.id = item.id;
				this.editPriceForm.paymentPrice = item.paymentPrice;
				this.showModal = true;
			},
			//改价
			handleEditPrice() {
				if (!this.editPriceForm.paymentPrice) {
					uni.showToast({
						title: '价格必须填写',
						icon: 'none'
					})
					return;
				}
				editPrice({
					id: this.editPriceForm.id,
					paymentPrice: this.editPriceForm.paymentPrice
				}).then(data => {
					uni.showToast({
						title: '修改成功'
					})
					this.mescroll.resetUpScroll(); //刷新
					this.showModal = false;
				}).catch(() => {

				})
			},
			//订单取消
			onOrderCancel(row, index) {
				var _this = this
				uni.showModal({
					title: '提示',
					content: '是否确认取消此订单？',
					success: function(res) {
						if (res.confirm) {
							orderCancel(data.id).then(data => {
								uni.showToast({
									title: '删除成功'
								})
								_this.mescroll.resetUpScroll(); //刷新
							}).catch(function(err) {})
						} else if (res.cancel) {}
					}
				});
			},
			//提货
			onTakeGoods(data) {
				var _this = this
				uni.showModal({
					title: '提示',
					content: '是否确认提货此订单？',
					success: function(res) {
						if (res.confirm) {
							takeGoods(data.id).then(data => {
								uni.showToast({
									title: '提货成功'
								})
								_this.mescroll.resetUpScroll(); //刷新
							}).catch(function(err) {})
						} else if (res.cancel) {}
					}
				});
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				this.mescroll.resetUpScroll();
			},
			search(val) {
				this.mescroll.resetUpScroll();
			},
			/*mescroll组件初始化的回调,可获取到mescroll对象 (此处可删,mixins已默认)*/
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			/*下拉刷新的回调, 有三种处理方式:*/
			downCallback() {
				this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
				this.mescroll.endSuccess()
			},
			/*上拉加载的回调*/
			upCallback(page) {
				let pageNum = page.num; // 页码, 默认从1开始
				let pageSize = page.size; // 页长, 默认每页10条
				let querySearch = '?current=' + pageNum + '&size=' + pageSize + '&descs=create_time';
				if (this.inputKey) {
					querySearch = querySearch + '&orderNo=' + this.inputKey
				}
				if (this.TabCur > 0) {
					querySearch = querySearch + '&status=' + (this.TabCur - 1);
				}
				getPage(querySearch).then(response => {
					if (response.data) {
						// 接口返回的当前页数据列表 (数组)
						let curPageData = response.data.records;
						// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
						let curPageLen = curPageData.length;
						// 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
						let totalSize = response.data.total;
						//设置列表数据
						if (page.num == 1) this.dataList = []; //如果是第一页需手动置空列表
						this.dataList = this.dataList.concat(curPageData); //追加新数据
						// 请求成功,隐藏加载状态
						this.mescroll.endBySize(curPageLen, totalSize);
						setTimeout(() => {
							this.mescroll.endSuccess(curPageLen)
						}, 20)
					}
				});
			},
			onTips() {
				uni.showModal({
					title: '提示',
					content: '使用扫一扫可对自提订单进行扫码核销',
					showCancel: false,
					confirmText: '我知道了',
					success: (res) => {

					}
				})
			},
			scanSuccess(res) {
				// 扫码成功
				if (res) {
					uni.navigateTo({
						url: '/pages/mall/order/detail?id=' + res
					})
				} else {
					uni.showToast({
						title: '扫码失败',
						icon: 'none'
					})
				}
			},
			async checkPermission(code) {
				let status = permision.isIOS ? await permision.requestIOS('camera') : await permision.requestAndroid(
					'android.permission.CAMERA');
				if (status === null || status === 1) {
					status = 1;
				} else {
					uni.showModal({
						content: "需要相机权限",
						confirmText: "设置",
						success: function(res) {
							if (res.confirm) {
								permision.gotoAppSetting();
							}
						}
					})
				}
				return status;
			},
			async onScan(model = 'pad') {
				let status = await this.checkPermission();
				if (status !== 1) {
					return;
				}
				let that = this;
				uni.scanCode({
					scanType: ["qrCode", "barCode"],
					onlyFromCamera: true,
					success: (res) => {
						// console.log("res: " + JSON.stringify(res));
						that.scanSuccess(res.result)
					},
					fail: (err) => {
					}
				});
			},
		}
	}
</script>

<style>
	.search {
		width: 100%;
		padding-bottom: 20rpx;
		position: fixed;
		z-index: 9999;
	}

	.search-content {
		background-color: #f5f5f5;
		line-height: 64upx;
		height: 64upx;
		font-size: 24upx;
		color: #333333;
		flex: 1;
		display: flex;
		align-items: center;
		margin: 0 30upx;
	}

	.search-content input {
		flex: 1;
		padding-right: 30upx;
		height: 64upx;
		line-height: 64upx;
		font-size: 26upx;
		background-color: transparent;
	}

	.search-button {
		padding: 10rpx 30rpx 10rpx 30rpx;
	}





	.img-box {
		width: 200rpx !important;
		height: 200rpx !important;
	}

	.pay {
		padding: 10rpx 20rpx 10rpx 20rpx;
	}

	.button-bg {
		padding: 20rpx 40rpx 20rpx 40rpx;
	}

	.text-to-long {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
</style>